.box-container {
  background: #ececec;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.search-wrap{
  display: flex;
  justify-content:space-between;
  height: 60px;
  line-height: 60px;
  background: #ffffff;
  .radio-wrap {
    padding: 0 30px;
  }
  .time-picker-wrap {
    padding: 0 30px 0 30px;
  }
  .month-picker-wrap {
    text-align: center;
    [nz-select] {
      width: 120px;
      margin-right: 30px;
    }
  }
  .button-wrap {
    flex: 1;
    padding-right: 30px;
    text-align: right;

    [nz-button] {
      margin:0 10px;
    }
  }
}

.main-content {
  flex: 1;

  .main-content-wrap {
    display: flex;
    width: 100%;

  }
  .left-panel {
    width: 220px;
    height: calc(100vh - 170px);
    overflow-y: auto;
    margin: 20px 0 10px 18px;
    background: #fff;
  }

  .right-panel {
    flex: 1;
    margin: 10px;
    height: calc(100vh - 160px);
    overflow-y: auto;
    .right-top-box {
      background: #EEEEEE;
      .content-top-bar {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .right-ctrl-box {
          > div {
            display: inline-block;
          }
        }
      }

      .right-content {
        display: flex;
        flex-wrap: wrap;
        .card {
          width: calc(50% - 20px);
          margin: 10px;
        }
        .row-card {
          width: calc(100% - 10px);
          margin: 10px;
        }

        .card-search-wrap {
          display: flex;
          div {
            margin-left: 10px;
            line-height: 32px;
          }

          .search-icon {
            color: #1A7CEE;
            font-size: 20px;
            cursor: pointer;
          }

        }

        ::ng-deep .ant-card-head {
          background: #F9F9F9;
          color: #333333;
          height: 60px;
        }
        ::ng-deep .ant-form-item {
          margin-bottom: 10px;
        }
      }
    }
  }
}
.card-box {
  width: calc(100% / 3);
  flex: 1;

  &:first-child {
    .table-card {
      margin-left: 0;
    }
  }

  &:last-child {
    .table-card {
      margin-right: 0;
    }
  }
  .table-card {
    margin: 5px;
    height: 100%;
    &:hover {
      cursor: pointer;
      box-shadow: 5px 12px 8px -12px rgba(0, 0, 0, 0.3);
    }
  }
}
